<!-- 认证详情页 -->
<template>
	<view class="page-content">
		<view class="bt-block">
			<bg-cell>
				<view class="flex align-center  justify-between">
					<view class="flex align-center">
						<u--image class="mr-2" src="/static/images/ui/verify/head.png" width="40rpx"
							height="40rpx"></u--image>
						<view class="font-1"> {{obj.realName}} </view>
					</view>

					<view v-if="$store.getters.userId==propUserId &&obj.authStatus==1" class="font-14 text-grey2">已实名认证
					</view>
				</view>
			</bg-cell>
			<!-- <bg-cell2 label="LLJF  ID" :value="obj.userNo"></bg-cell2> -->
			<bg-cell2 label="身份证" :border="false">
				<template slot="extra">
					<view>
						<u--image @click="previewImg(obj.idFaceSideUrl)" width="100%" :src="obj.idFaceSideUrl"
							height="184"></u--image>
						<u--image @click="previewImg(obj.idNationalSideUrl)" class="mt-2" width="100%"
							:src="obj.idNationalSideUrl" height="184"></u--image>
					</view>
				</template>
			</bg-cell2>
		</view>
		<view class="bt-block mt-2">
			<bg-cell2 label="姓名" :value="obj.realName"></bg-cell2>
			<bg-cell2 label="性别">
				<template slot="value">
					<bg-label :options="dict.type.sys_user_sex" :value="obj.gender"></bg-label>
				</template>
			</bg-cell2>
			<bg-cell2 label="身份证号" :value="obj.idCardNo"></bg-cell2>
			<bg-cell2 label="期限" :value="obj.idDeadline"></bg-cell2>
			<bg-cell2 label="联系方式" :value="obj.phone"></bg-cell2>
			<bg-cell2 label="银行卡号">
				<template slot="value">
					<view v-if="$store.getters.userId==propUserId">
						<view class="font-1 text-grey2" v-if="obj.bankCardNo">{{obj.bankCardNo}}</view>
						<view v-else class="flex" @click="gotoCard">
							<text class="text-gray">（未认证）</text>
							<view class="flex align-center">
								<view class="text-red">去认证</view>
								<u-icon color="red" name="play-right-fill" size="8"></u-icon>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="font-1 text-grey2">{{obj.bankCardNo}}</view>
					</view>
				</template>
			</bg-cell2>
			<bg-cell2 :border="false" label="开户行" :value="obj.bankName"></bg-cell2>
		</view>
		<view class="bt-block mt-2">
			<bg-cell2 label="职业技能证书" :border="false">
				<template slot="extra">
					<bg-images :imgList="obj.skillCertUrlList"></bg-images>
				</template>
			</bg-cell2>

		</view>
		<view class="bt-block mt-2">
			<bg-cell2 label="紧急联系人" :value="obj.emergencyUserName"></bg-cell2>
			<bg-cell2 label="紧急联系人关系">
				<template slot="value">
					<bg-label :options="dict.type.emergency_type" :value="obj.emergencyType"></bg-label>
				</template>
			</bg-cell2>
			<bg-cell2 label="联系人电话" :value="obj.emergencyPhone"></bg-cell2>
			<bg-cell2 label="健康证明" :border="false">
				<template slot="extra">
					<bg-images :imgList="obj.healthCertUrlList"></bg-images>
				</template>
			</bg-cell2>
		</view>
		<view class="update_btn" @click="updataInfo()">
			编辑信息
		</view>
	</view>
</template>

<script>
	import {
		getImgUrl
	} from "@/utils/upload"
	import {
		userInfo
	} from "@/api/system/user.js"
	export default {
		name: 'VerifyDetail',
		props: ["propUserId"],
		dicts: ["sys_user_sex", "emergency_type"],
		onLoad(options) {
			if (options.userId) {
				this.userId = options.userId
			}
		},
		mounted() {
			this.getUserInfo()
			uni.$on("refresh-card", () => {
				this.getUserInfo()
			})
		},
		data() {
			return {
				obj: {}
			}
		},
		methods: {
			getUserInfo() {
				if (!this.userId && this.propUserId) {
					this.userId = this.propUserId
				}
				userInfo({
					userId: this.userId
				}).then(res => {
					this.obj = res.data
				})
			},
			getImg(fileName) {
				return getImgUrl(fileName)
			},
			gotoCard() {
				uni.navigateTo({
					url: "/pages/enter/verify/card"
				})
			},
			previewImg(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			},
			updataInfo() {
				uni.navigateTo({
					url: `/pages/enter/verify/new?isUpdate=1`
				})
			}
		}
	}
</script>

<style scoped>
	.page-content {
		padding: 24rpx;
		background-color: #fafafa;
	}
	.update_btn {
		height: 90rpx;
		background: #ee3636;
		border-radius: 8rpx;
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	
		image {
			width: 42rpx;
			height: 42rpx;
		}
	}
</style>